<template>
    <div>
        <p>输入框:{{name}}</p>
        <!-- 表单修饰符 -->
        <!-- 截取前后空格 -->
        <input type="text" v-model.trim="name">
        <!-- 输入完之后再变化(节流防抖) -->
        <input type="text" v-model.lazy="name">
        <!-- 转换成数字 -->
        <input type="text" v-model.number="age">
        <p>多行文本:{{desc}}</p>
        <textarea v-model="desc"></textarea>
        <!-- 注意！：<textarea>{{desc}}</textarea>是不行的！ -->
        <p>复选框{{checked}}</p>
        <input type="checkbox" v-model="checked" />

        <p>多个复选框{{checkedNames}}</p>
        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="john" value="john" v-model="checkedNames">
        <label for="john">john</label>
        <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
        <label for="mike">mike</label>    

        <p>单选{{gender}}</p>
        <input type="radio" id="male" value="male" v-model="gender">
        <label for="male">男</label>
        <input type="radio" id="female" value="female" v-model="gender">
        <label for="female">女</label> 

        <p>下拉列表选择{{selected}}</p>
        <select v-model="selected">
            <option value="" disabled>请选择</option>    
            <option value="" >A</option>    
            <option value="" >B</option>    
            <option value="" >C</option>    
        </select>      

        <p>多选下拉列表{{selectedList}}</p>
        <select v-model="selectedList" multiple>
            <option value="" disabled>请选择</option>    
            <option value="" >A</option>    
            <option value="" >B</option>    
            <option value="" >C</option>    
        </select>                       
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name:'殷晨东',
                age:18,
                desc:'自我介绍',
                checked:true,
                checkedNames:[],
                gender:'male',
                selected:'',
                selectedList:[]
            }
        },

    }
</script>
<style>

</style>